<template>
  <view class="pics">
    <scroll-view scroll-y class="left">
      <view
        :class="active === index ? 'active' : ''"
        v-for="(items, index) in CommunityTitle"
        :key="items.id"
        @click="leftClickHandle(index, items.id)"
      >
        {{ items.title }}
      </view>
    </scroll-view>
    <scroll-view scroll-y class="right">
      <view v-for="(items, index) in CommunityData" :key="index">{{ items.zhaiyao }}</view>
      <text v-if="CommunityData.length === 0">暂无数据</text>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      CommunityTitle: [],
      active: 0,
      CommunityData: [],
    };
  },
  methods: {
    async getCommunityPics() {
      const res = await this.$myRequest({
        url: "/api/getimgcategory",
      });
      this.CommunityTitle = res.data.message;
    },
    async leftClickHandle(index, id) {
      //点击高亮
      this.active = index;
      const res = await this.$myRequest({
        url: "/api/getimages/" + id,
      });
      this.CommunityData = res.data.message;
      console.log(this.CommunityData);
    },
  },
  onLoad() {
    this.getCommunityPics();
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
}
.pics {
  margin-top: 3px;
  display: flex;
  .left {
    display: flex;
    width: 200rpx;
    border-right: 1px solid rgb(197, 197, 197);
    view {
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid rgb(233, 233, 233);
    }
    .active {
      background: $shop-color;
      color: white;
    }
  }
  .right {
    width: 530rpx;
    margin: 0 auto;
  }
} 
</style>
